<html>
    <head>
        <title>人脸识别</title>
        <meta charset="utf-8">
        <meta name="Author" content="">
        <style>
            * { margin: 0; padding: 0; }
    
            html, body { height: 100%; background:#222 ; }
    
            body { display: flex; flex-direction: column; justify-content: center; align-items: center; }
    
            .veriface { display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 800px; height: 500px; margin: 30px auto; background: #c3c0bf; border-radius: 40px; }
    
            .veriface .capture { display: block; width: 760px; height: 360px; background-color: #222222; border-radius: 30px 30px 10px 10px; }
    
            .veriface .control { display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; height: 70px; }
    
            .veriface .control span { width: 100px; height: 45px; background: #999999; text-align: center; line-height: 45px; color: #ffffff; font-size: 12px; border-radius: 8px; box-shadow: 0 0 4px #cccccc; user-select: none; cursor: pointer; transition: 1s; }
    
            .veriface .control span:hover { background-color: #336688; }
    
            h3.notice {color: #336688; }
    
        </style>
    
    
    </head>
    <body>
    
        <div class="veriface">
            <video class="capture" width="760" height="360" src=""></video>
            <h3 class="notice">请把脸伸过来,我瞅瞅 (｀･ω･´) </h3>
            <div class="control">
                <span class="open">开启摄像头</span>
                <span class="recognition">人脸识别</span>
                <span class="close">关闭摄像头</span>
            </div>
        </div>
        <script src="js/POST.js"></script>
        <script>
            //获取open按钮
            var open = document.querySelector('.open');
            //获取video标签
            var capture = document.querySelector('.capture');
            //获取人脸识别按钮
            var recognition= document.querySelector('.recognition'); 

            //调用摄像头，获取流媒体数据
           // console.log(window.navigator.getUserMedia);
            //浏览器兼容
            window.navigator.getUserMedia = navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;


            open.onclick = hedyCamera;//回调+()主动开启
            recognition.onclick = screenShot;//点击人脸识别


            function hedyCamera(){
                if(navigator.getUserMedia){
                    //判断是否能调用api
                    navigator.getUserMedia({
                        //是否调用摄像头
                        'video':true,
                        //是否调用音频
                        'audio':false,
                    },getVideoStream,failToGet)
                }else{
                    alert("/(ㄒoㄒ)/~~，您的浏览器不支持调用摄像头");
                }
            }

            //获取视频流数据成功
            function getVideoStream(stream){
                buffer = stream;
                //如果是火狐浏览器
                if(capture.mozSrcObject!==undefined){
                    //生成路径
                    capture.mozSrcObject = buffer;
                }else{
                    //把对象解析程url
                    capture.src = window.URL && window.URL.createObjectURL(buffer)||buffer;
                    //生成的缓存
                    //console.log(window.URL.createObjectURL(buffer));
                }
                alert("o(*￣▽￣*)ブ调用成功");
            }

            //获取失败
            function failToGet(){
                alert("/(ㄒoㄒ)/~~调用失败");
            }

            function screenShot(){
                //创建节点标签，dom对象
                var canvas = document.createElement('canvas');
                canvas.width = 531,canvas.height = 395;
                //画布
                var ctx = canvas.getContext('2d');

                ctx.drawImage(capture,0,0,531,395);
                //把当前的canvas转化为base64
                var basePath = canvas.toDataURL;
                //图片参数
                 console.log(basePath);
                // //创建img标签
                // var oImg = document.createElement('img');
                // //改变img标签src
                // oImg.src = basePath;
                new Post({
                    //地址
                    url:'http://localhost',
                    //参数
                    data:{
                        imgUrl:basePath,
                        // age:21
                    },
                    //回调
                    success:function(res){
                        //console.log(res);
                        if(res>90){
                            console.log('欢迎小主');
                        }else{
                            console.log('无法识别');
                        }
                    }

                })
            }

            //用post方式传递数据  get base64 mb url
            function Post(opt){
                //构造函数
                this.init(opt);

                this.url = opt.url;
            }

            Post.prototype = {
                contructor:'Post',
                init:function(opt){
                    //初始化参数  url地址  data参数 method方式
                    this.url = opt.url || '';
                    this.data = opt.data ||{};
                    this.method = 'POST';
                    this.async = true;//异步
                    //成功回调
                    this.success = opt.success || function(){};
                    this.format();
                },
                format:function(){
                    //json转化为字符串
                    var data = this.data;
                    console.log(data);//imgUrl: "base64"
                    var params = [];//数组
                    //json 的for...in
                    for(var key in data){
                        console.log(key,data[key]);//键  值分开 imgUrl base64
                        params.push(key+'='+data[key]);//键  值  拼接 ["imgUrl=base64", "age=21"]
                    }
                    console.log(params);
                    //数组拼接
                    var postData = params.join('&');
                    console.log(postData);//imgUrl=base64&age=21
                    this.xhr();
                },
                xhr:function(){
                    //ajax对象实例化
                    var xhr = new XMLHttpRequest();
                    xhr.open(this.method,this.url,this.async);
                    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');
                    xhr.send(this.postData);
                    xhr.onreadystatechange = function(){
                        if(xhr.status===200&&xhr.readyState===4){
                            //回调数据
                            this.success(xhr.response);
                        }
                    }.bind(this);
                }
            }

           // var newP = new Post({url:12334});
            //console.log(window.url);

        </script>
    </body>
</html>